<template>
	<uiwu-popup-model
		v-model="showModel" 
		v-if="showModel" 
		:showTitle="false" 
		iconSrc="/static/shangchuangle.png"
		@confirm="TapStart(dataInfo)"
		@cancel="giveupGrme(dataInfo)"
	>
		<template v-slot:content>
			<view class="title">{{uiwu.lang('轮到你了')}}</view>
			<view class="title1">{{timsnum}}S</view>
		</template>
		<template v-slot:close>
			{{uiwu.lang('放弃游戏')}}
		</template>
		<template v-slot:confirm>
			{{uiwu.lang('马上开始')}}
		</template>
	</uiwu-popup-model>
</template>

<script lang="ts" setup>
	import { uiwu } from '@/config/config';
	import { ref } from "vue";
	import { startGren , forgo_subscribe } from '@/api/api';
	defineProps({
		dataInfo:{
			default:{},
			type:Object
		}
	})
	const emits = defineEmits(['onStart','changeUpdate','closegrme'])
	const showModel = ref<boolean>(true)
	const timsnum = ref<number>(10)
	const isStart = ref<boolean>(true)
	const t = setInterval(()=>{
		timsnum.value--
		if(timsnum.value == 0){
			clearInterval(t)
			emits('closegrme')
		}
	},1000)
	const giveupGrme = async ({device_info}) : Promise<any> => {
		const result = await forgo_subscribe({
			device_id:device_info.id,
		})
		if(!result) return 
		clearInterval(t)
		emits('closegrme')
	}
	const TapStart = async ({device_info}) : Promise<any> => {
		if(!isStart.value) return
		isStart.value = false
		const result = await startGren({
			device_id:device_info.id,
			room_id:0
		})
		if(!result) return isStart.value = true
		isStart.value = true
		emits('onStart',result.data.room_id)
	}
</script>

<style lang="scss" scoped>
	.uiwu-popup{
		width: 100%;
		height: 100vh;
		justify-content: center;
		align-items: center;
	}
	.title{
		font-size: 32rpx;
		font-weight: 500;
		color: #231815;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.title1{
		font-size: 32rpx;
		font-weight: bold;
		color: #231815;
		text-align: center;
	}
	.uiwu-box{
		width: 544rpx;
		height: 580rpx;
		background: no-repeat 0 0;
		background-size: 100% 100%;
		image{
			width: 130rpx;
			display: block;
			margin: 140rpx auto 54rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #231815;
			text-align: center;
		}
		.tips{
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			margin-top: 75rpx;
			text-align: center;
		}
		.btns{
			padding: 0 44rpx;
			.btn1{
				position: relative;
				width: 204rpx;
				height: 58rpx;
				margin: 48rpx auto 0;
				text{
					width: 204rpx;
					height: 58rpx;
					border: 3rpx solid #231815;
					border-radius: 29rpx;
					position: absolute;
					left: -2rpx;
					top:-4.5rpx;
					z-index: 9;
					font-size: 32rpx;
					font-weight: bold;
					color: #231815;
					&:nth-child(1){
						background-color: #F1F1F1;
					}
					&:nth-child(2){
						background-color: #FFFFFF;
						z-index: 8;
						left: 2rpx;
						top:4.5rpx;
					}
				}
			}
		}
		.btn{
			position: relative;
			width: 204rpx;
			height: 58rpx;
			margin: 48rpx auto 0;
			text{
				width: 204rpx;
				height: 58rpx;
				border: 3rpx solid #231815;
				border-radius: 29rpx;
				position: absolute;
				left: -2rpx;
				top:-4.5rpx;
				z-index: 9;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				&:nth-child(1){
					background-color: #EF821E;
				}
				&:nth-child(2){
					background-color: #FAC500;
					z-index: 8;
					left: 2rpx;
					top:4.5rpx;
				}
			}
		}
	}
</style>